<template>
	<view class="page" :style="themeColor">
		<view class="flex benben-position-layout flex flex-wrap align-center releaseTrend_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub releaseTrend_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  releaseTrend_fd0_0_c0_c0' @tap.stop="handleJumpDiy" data-type="back"
						data-url="1">&#xE794;</text>
				</view>
				<view class='flex flex-wrap align-stretch justify-center flex-sub'>
					<text class='releaseTrend_fd0_0_c1_c0'>发布动态</text>
				</view>
				<view class='flex flex-wrap align-center releaseTrend_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<!---flex布局flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout releaseTrend_flex_1">
			<view class='flex flex-wrap align-center releaseTrend_fd1_0' @tap.stop="openSelect1">
				<text class='releaseTrend_fd1_0_c0'>请选择发布图文/视频</text>
				<input class='releaseTrend_fd1_0_c1' type="text" placeholder="请选择" confirm-type="done" :maxlength="-1"
					:disabled="true" placeholder-style="color:rgba(102, 102, 102, 1);font-size:28rpx" v-model="fd1_0_c1" />
				<text class='fu-iconfont2  releaseTrend_fd1_0_c2'>&#xe7f2;</text>
			</view>
			<view class='flex flex-wrap align-center releaseTrend_fd1_1' @tap.stop="openSelect">
				<text class='releaseTrend_fd1_0_c0'>选择类型</text>
				<input class='releaseTrend_fd1_0_c1' type="text" placeholder="选择发布类型" confirm-type="done"
					:disabled="true" :maxlength="-1" placeholder-style="color:rgba(102, 102, 102, 1);font-size:28rpx"
					v-model="fd1_1_c1" />
				<text class='fu-iconfont2  releaseTrend_fd1_0_c2'>&#xe7f2;</text>
			</view>
			<view class='flex flex-wrap align-center releaseTrend_fd1_1'>
				<text class='releaseTrend_fd1_0_c0'>标题</text>
				<input class='releaseTrend_fd1_0_c1' type="text" placeholder="请输入标题" confirm-type="done"
					:disabled="false" :maxlength="-1" placeholder-style="color:rgba(102, 102, 102, 1);font-size:28rpx"
					v-model="title" />
			</view>
		</view>

		<!---flex布局flex布局结束-->
		<!---flex布局flex布局开始-->
		<view class="flex flex-direction flex-wrap align-stretch benben-flex-layout releaseTrend_flex_2">


			<view class="video_img" v-if="type == 3">
				<view @tap.stop="uploadVideo">
					<view class="video" v-if="videoSrc">
						<video :src="videoSrc"></video>
					</view>
					<view class="video_upload" v-if="!videoSrc">
						<image :src='STATIC_URL+"75.png"' mode="aspectFill"></image>
					</view>
				</view>
				<view class="video_image" @tap.stop="uploadVideoImg">
					<image v-if="!videoImg" :src='STATIC_URL+"28.png"' mode="aspectFill"></image>
					<image class="video_image_icon" v-else :src='videoImg' mode="aspectFill"></image>
				</view>
			</view>


			<view class="images_list" v-if="type == 2">
				<view class="images_list_item" v-for="(v, k) in imageData" :key="k">
					<image :src='v' mode="aspectFill"></image>
					<image @tap.stop="deleteImg(k)" class="deImg" :src='STATIC_URL+"34.png"' mode=""></image>
				</view>
				<view class="images_list_item" @tap.stop="uploadIMG" v-if="imageData.length < 9">
					<image :src='STATIC_URL+"48.jpg"' mode="aspectFill"></image>
				</view>
			</view>

			<!-- <view class='flex flex-wrap align-center releaseTrend_fd2_1'>
				<text class='releaseTrend_fd2_1_c0'>填写标题会有更多赞哦~</text>
			</view> -->
			<view class='flex flex-wrap releaseTrend_fd2_2'>
				<textarea class='flex releaseTrend_input_fd2_2' :placeholder="'添加正文'" :maxlength="200"
					placeholder-style="color:#999;font-size:28rpx" v-model="fd2_2" />

			</view>
		</view>

		<!---flex布局flex布局结束-->
		<view class="flex flex-direction flex-wrap align-center benben-position-layout flex releaseTrend_flex_3">
			<button class='releaseTrend_fd3_0' @tap.stop="release">发布动态</button>

		</view>
		<view :style="{height: '152rpx'}"></view>

		<u-select v-model="show1" :list="list1" :safe-area-inset-bottom="true" confirm-color="#6A0002"
			@confirm="confirm1"></u-select>

		<u-select v-model="show" title="选择类型" :list="list" value-name="aid" label-name="name"
			:safe-area-inset-bottom="true" confirm-color="#6A0002" @confirm="confirm"></u-select>

	</view>
</template>
<script>
	import UploadImage from '@/common/utils/upload-image.js'
	export default {
		components: {},


		data() {
			return {
				"fd2_0_c0": "",
				"fd2_0_c0id": "",
				"fd2_2": "",
				"fd1_0_c1": "",
				"fd1_1_c1": "",
				"show": false,
				"list": [],
				"cate_id": "", // 类型id
				"show1": false,
				"list1": [
					{
						value: '2',
						label: '图文'
					},
					{
						value: '3',
						label: '视频'
					}
				],
				"type": "", // 内容类型
				"imgNum": 9,
				"imageData": [], // 图片列表
				"videoSrc": "",
				"videoImg": "",  // 视频封面
				"id": "",  // 编辑动态id
				"title": "",
			};
		},
		computed: {
			themeColor() {
				return this.$store.getters.themeColor
			},

		},
		watch: {},
		onLoad(options) {
			this.getFindType();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			getFindType() {
				this.$api.post(global.API_VERSION + '/647321a4177dc', {
					from: 'publish'
				}).then(res => {
					if (res.data.code == 1) {
						this.list = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			openSelect() {
				this.show = true;
			},
			confirm(e) {
				this.cate_id = e[0].value;
				this.fd1_1_c1 = e[0].label;
			},
			openSelect1() {
				this.show1 = true;
			},
			confirm1(e) {
				this.type = e[0].value;
				this.fd1_0_c1 = e[0].label;
			},
			// 发布动态
			release() {
				if (!this.type) {
					this.$message.info('请选择发布的内容类型');
					return;
				}
				if (!this.cate_id) {
					this.$message.info('请选择动态类型');
					return;
				}
				if (!this.title) {
					this.$message.info('请输入标题');
					return;
				}
				if (this.type == 1) {
					if (!this.fd2_2) {
						this.$message.info('请输入动态内容');
						return;
					}
				}
				if (this.type == 2) {
					if (this.imageData.length == 0) {
						this.$message.info('请上传动态图片');
						return;
					}
				}
				if (this.type == 3) {
					if (!this.videoSrc) {
						this.$message.info('请上传动态视频');
						return;
					}
					if (!this.videoImg) {
						this.$message.info('请上传动态视频封面');
						return;
					}
				}
				this.$api.post(global.API_VERSION + '/647321c032a90', {
					community_id: this.id,
					type: this.type,
					cate_id: this.cate_id,
					content: this.fd2_2,
					images: this.imageData.length > 0 ? this.imageData.join(',') : "",
					video: this.videoSrc,
					video_image: this.videoImg,
					title: this.title
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					}
				})
				
			},

			// 上传图片
			uploadIMG(e) {
				let self = this
				// 从相册中选择图片
				uni.chooseImage({
					count: self.imgNum, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择

					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.API_VERSION +
								'/6438a7602dbc6', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file[]',
								formData: {
									dir: 'images'
								},
								success: (uploadFileRes) => {
									// console.log(uploadFileRes)
									self.imageData.push(JSON.parse(uploadFileRes.data).data[0].path)
									self.imgNum = 9 - self.imageData.length
								},
								fail: function(err) {
									console.log(err)
								}
							});
						}

					}
				});
			},
			// 删除图片
			deleteImg(index) {
				this.imageData.splice(index, 1);
				this.$message.info('删除成功');
				this.imgNum = 9 - this.imageData.length;
			},
			
			// 上传视频
			uploadVideo() {
				let self = this
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success: function(res) {
						console.log(res);
						const tempFilePaths = res.tempFilePath;
						// console.log(tempFilePaths)
						uni.uploadFile({
							url: global.API_BASE_URL + global.API_VERSION +
							'/6438a7602dbc6', //仅为示例，非真实的接口地址
							filePath: tempFilePaths,
							name: 'file[]',
							formData: {
								dir: 'videos'
							},
							success: (uploadFileRes) => {
								// console.log(uploadFileRes)
								self.videoSrc = JSON.parse(uploadFileRes.data).data[0].path;
							},
							fail: function(err) {
								console.log(err)
							}
						});
					},
				});
			},
			// 上传视频封面
			uploadVideoImg() {
				let self = this
				// 从相册中选择图片
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'], //从相册选择
				
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						// console.log(tempFilePaths)
						for (let i = 0; i < tempFilePaths.length; i++) {
							uni.uploadFile({
								url: global.API_BASE_URL + global.API_VERSION +
								'/6438a7602dbc6', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[i],
								name: 'file[]',
								formData: {
									dir: 'images'
								},
								success: (uploadFileRes) => {
									// console.log(uploadFileRes)
									self.videoImg = JSON.parse(uploadFileRes.data).data[0].path
								},
								fail: function(err) {
									console.log(err)
								}
							});
						}
				
					}
				});
			},


			//上传单图、多图方法
			soloChooseImage(id, path, obj, obj1, fnName = false) {
				let self = this
				if (!obj) obj = this
				if (!obj1) obj1 = this
				if (self.uploading) {
					return
				}
				// 从相册中选择图片
				uni.chooseImage({
					count: 1, // 默认3
					sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						self.uploading = true
						// 开始上传
						new UploadImage(res.tempFiles, {
							complete: function(res) {
								self.uploading = false
								if (id) self.$set(obj, id, res[0].id)
								if (path) self.$set(obj1, path, res[0].path)
								if (fnName) self[fnName]()
							},
						})
					},
				})
			},
			
			
			// 立即购买
			buyNow() {
				if (this.detailsData.is_buy == 1) {
					this.$message.info('已购买过该课程')
				} else if(this.detailsData.price != 0){
					uni.navigateTo({
						url: '/pages/study/confirmPurchase?image=' + this.detailsData.image + '&price=' + this.detailsData.price + '&title=' + this.detailsData.title + '&month=' + this.detailsData.month + '&id=' + this.detailsData.id + '&course_type=' + this.detailsData.course_type
					})
				} else {
					this.$api.post(global.apiUrls.getFreePurchase, {
						course_id: this.detailsData.id
					}).then((res) => {
						console.log('res', res);
						if (res.data.code == 1) {
							this.$message.info('获取成功,跳转首页...')
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/home/home/home'
								})
							},1000)
							
						} else {
							this.$message.info(res.data.msg)
						}
					})
				}
			},
		}
	};
</script>
<style lang="scss" scoped>
	.video_img {
		display: flex;
		.video {
			width: 180rpx;
			height: 180rpx;
			margin-bottom: 16px;
			margin-right: 16rpx;
			video {
				width: 100%;
				height: 100%;
			}
		}
		.video_image {
			width: 180rpx;
			height: 222rpx;
			margin-bottom: 16px;
			// .video_image_icon {
			// 	width: 180rpx;
			// 	height: 180rpx;
			// }
			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}

		.video_upload {
			width: 180rpx;
			height: 180rpx;
			margin-bottom: 16px;
			margin-right: 16rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}
	}

	.images_list {
		overflow: hidden;

		.images_list_item {
			float: left;
			margin: 0 16rpx 16rpx 0;
			width: 180rpx;
			height: 180rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}

			.deImg {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 8rpx;
				right: 8rpx;
			}
		}
	}

	.page {
		width: 100vw;
		overflow-x: hidden;
		min-height: calc(100vh - var(--window-bottom));
		background: rgba(246, 247, 249, 1);
		background-size: 100% auto !important;
	}

	.releaseTrend_flex_0 {
		border-bottom: 1px solid #eee;
		background: #fff;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.releaseTrend_fd0_0_c2 {
		width: 32rpx;
		height: 32rpx;
	}

	.releaseTrend_fd0_0_c1_c0 {
		font-size: 36rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.releaseTrend_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
		line-height: 88rpx;
	}

	.releaseTrend_fd0_0 {
		margin: 0rpx 32rpx 0rpx 32rpx;
	}

	.releaseTrend_flex_1 {
		background: var(--benbenbgColor0);
		padding: 0rpx 32rpx 0rpx 32rpx;
		background-size: 100% auto !important;
	}

	.releaseTrend_fd1_1 {
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.releaseTrend_fd1_0_c2 {
		font-size: 28rpx;
		color: rgba(191, 191, 191, 1);
	}

	.releaseTrend_fd1_0_c1 {
		text-align: right;
		margin: 0rpx 16rpx 0rpx auto;
		color: var(--benbenFontColor0);
		font-size: 28rpx;
		width: 300rpx;
	}

	.releaseTrend_fd1_0_c0 {
		color: #333333;
		font-size: 28rpx;
		font-weight: 500;
	}

	.releaseTrend_fd1_0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 32rpx 0rpx;
	}

	.releaseTrend_flex_2 {
		background: var(--benbenbgColor0);
		background-size: 100% auto !important;
		margin: 16rpx 0rpx 0rpx 0rpx;
		padding: 32rpx 32rpx 32rpx 32rpx;
	}

	.releaseTrend_input_fd2_2 {
		width: 100%;
		height: 200rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333;
		white-space: pre-wrap;
	}

	.releaseTrend_fd2_2 {
		width: 686rpx;
		padding: 24rpx 0rpx 0rpx 0rpx;
	}

	.releaseTrend_fd2_1_c0 {
		color: #BFBFBF;
		font-size: 28rpx;
		font-weight: 400;
	}

	.releaseTrend_fd2_1 {
		border-bottom: 1px solid #eee;
		padding: 0rpx 0rpx 32rpx 0rpx;
	}

	.releaseTrend_fd2_0_c0_image {
		width: 180rpx;
		height: 222rpx;
	}

	.releaseTrend_fd2_0_c0_icon {
		top: 0rpx;
		right: 0rpx;
		z-index: 10;
		color: #ff5536;
	}

	.releaseTrend_fd2_0 {
		margin: 0rpx 0rpx 32rpx 0rpx;
	}

	.releaseTrend_flex_3 {
		width: 750rpx;
		height: 152rpx;
		overflow: hidden;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
	}

	.releaseTrend_fd3_0 {
		background: #6A0002;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		font-size: 32rpx;
		color: #fff;
		width: 638rpx;
		height: 88rpx;
		line-height: 88rpx;
	}
	
	
	.query {
		.list {
			padding: 0 32rpx;
			.listX {
				padding:  32rpx 0;
				display: flex;
				border-bottom: 1rpx solid #EEEEEE;
				.listX_left {
					width: 168rpx;
					height: 168rpx;
					border-radius: 16rpx;
					// background: skyblue;
					margin-right: 24rpx;
					// /deep/.u-lazy-item {
					// 	width: 100%;
					// 	height: 100% !important;
					// }
					.lazy_load {
						height: 168rpx;
						border-radius: 8upx !important;
					}
					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
				}
				.listX_right {
					width: calc(100% - 168rpx);
					.title {
						height: 90rpx;
						font-weight: bold;
						margin-bottom: 33rpx;
					}
					.money {
						color: #FF3A3A;
						font-weight: bold;
					}
					text:nth-child(1) {
						font-size: 24rpx;
						color: #333333;
						display: inline-block;
						transform: translateY(8rpx);
					}
					text:nth-child(2) {
						// text-align: right;
						display: inline-block;
						float: right;
					}
				}
			}
		}
		.footer {
			// display: flex;
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px -1rpx 8rpx rgba(0, 0, 0, 0.1);
			opacity: 1;
			line-height: 100rpx;
			padding: 0 32rpx;
			padding-top: 14rpx;
			.total {
				padding-top: 0rpx !important;
				width: 300rpx;
				// height: 40rpx;
				transform: translateY(-10rpx);
				float: left;
				text:nth-child(1) {
					font-weight: 400;
				}
				text:nth-child(2) {
					color: #FF3A3A;
					font-weight: bold;
				}
			}
			.college {
				width: 210rpx;
				height: 72rpx;
				line-height: 72rpx;
				text-align: center;
				background: #267DFF;
				opacity: 1;
				border-radius: 36rpx;
				color: #FFFFFF;
				font-size: 28rpx;
				// margin: 0 40rpx 0 178rpx;
				float: right;
			}
		}
	}
</style>